<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  	<style>
      .active {
        background: red;
      }
  	</style>
</head>
<body>
  	<button>1</button>
  	<button>2</button>
  	<button>3</button>
    <script src="./jq.js"></script>

    <script>
      // 1. 给所有的按钮绑定事件
      // 2. 点击当前按钮 按钮变红
      // 3. 其它按钮移除class

      // 将思路转换为代码
      $('button').on('click', function () { // 1. 给所有的按钮绑定事件
        $(this)
            .addClass('active') // 2. 点击当前按钮 按钮变红
            .siblings('button') // 3.1 选中其它按钮
            .removeClass('active'); // 3.2 其它按钮移除class
      });
    </script>
</body>
</html>